<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表 - 仿站电商平台</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
        <div class="header-content home-header">
            <h1 class="logo">仿站电商平台</h1>
            <div class="user-actions">
                <span>您好！</span>
                <a href="login.html" class="login-btn">请登录</a>
            </div>
        </div>
    </header>

    <main>
        <div class="goods-list-container">
            <div class="goods-list-header">
                <h2>商品列表</h2>
                <div class="pagination-info">
                    <span>1 / 77</span>
                    <div class="page-actions">
                        <button class="page-btn" id="firstPage">首页</button>
                        <button class="page-btn" id="prevPage">上一页</button>
                        <button class="page-btn" id="nextPage">下一页</button>
                        <button class="page-btn" id="lastPage">末页</button>
                        <input type="text" id="pageInput" class="page-input">
                        <button class="page-btn" id="jumpPage">跳转</button>
                        <select id="pageSizeSelect" class="page-select">
                            <option value="12">12</option>
                            <option value="24">24</option>
                            <option value="36">36</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="goods-list" id="goodsList">
                <!-- 商品列表将通过 JavaScript 动态生成 -->
            </div>
            <div class="pagination-info bottom">
                <div class="page-actions">
                    <button class="page-btn" id="firstPageBottom">首页</button>
                    <button class="page-btn" id="prevPageBottom">上一页</button>
                    <button class="page-btn" id="nextPageBottom">下一页</button>
                    <button class="page-btn" id="lastPageBottom">末页</button>
                </div>
            </div>
        </div>
    </main>
    <script src="./js/goods-list.js"></script>
</body>
</html> 